<!DOCTYPE html>
<html>
<head>
	<title>详情</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta content="telephone=no" name="format-detection" /> 
    <meta content="email=no" name="format-detection" />
	<link rel="stylesheet" type="text/css" href="../css/aui.css">
	<style type="text/css">
	
	.gb {
	    background-color: #E7F4FE;
	}
	.content{
		line-height: 30px;
	}
	.aui-grid-label{
		text-align: center;
		width: 90%;
	}
	.aui-grid-label2{
		text-align: center;
		width: 90%;
		margin-top: 15px;
		margin-bottom: 25px;
	}
	.bookshelf{
		display: inline-block;
		padding:3px 10px;
		background-color: #E7F4FE;
		color:#607d8b;
	}
	</style>
</head>
<body class="gb">
	<header class="aui-bar aui-bar-nav aui-bar-light">
	    <a class="aui-pull-left aui-btn">
	        <i class="aui-iconfont aui-icon-home"></i>
	    </a>
    	<div class="aui-title">天天读吧</div>
    	<a class="aui-pull-right aui-btn">
	        <span class="aui-iconfont aui-icon-search"></span>
	    </a>
	</header>
	<div class="aui-content aui-margin-t-10">
		<ul class="aui-list aui-media-list">
		    <li class="aui-list-item">
	            <div class="aui-media-list-item-inner">
	                <div class="aui-list-item-media">
	                    <img src="../img/1.jpg">
	                </div>
	                <div class="aui-list-item-inner">
	                    <div class="aui-list-item-text">
	                        <div class="aui-list-item-title">一念永恒</div>
	                        <div class="aui-list-item-right">
	                        <span class="bookshelf">加入书架</span>
	                        
	                        </div>
	                    </div>
	                    <div class="aui-list-item-text">
	                        作者：耳根
	                    </div>
	                    <div class="aui-list-item-text">
	                        一念成沧海，一念化桑田。一念斩千魔，一念诛万仙。唯我念……永恒
	                    </div>  
	                </div>
	            </div>
        	</li>
        </ul>
    <div class="aui-content aui-margin-t-10">
	<div class="aui-row">
	        <div class="aui-col-xs-6">
	            <div class="aui-grid-label">顺序</div>
	        </div>
	         <div class="aui-col-xs-6">

	            <div class="aui-grid-label">倒序</div>
	        </div>
     </div>
	<div class="aui-content aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
		<div class="aui-content aui-margin-b-15">
		    <ul class="aui-list aui-list-in">
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第一章影子的开始</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第二章影子的继续</div>
		            </div>
		        </li>
		     
		        <li class="aui-list-item">
		            <div class="aui-list-item-inner">
		                <div class="aui-list-item-title">第三章影子的结束</div>
		            </div>
		        </li>
		    </ul>
		</div>
		
		<div class="aui-row">
	        <div class="aui-col-xs-6">
	            <div class="aui-grid-label aui-grid-label2">上一页</div>
	        </div>
	         <div class="aui-col-xs-6">

	            <div class="aui-grid-label aui-grid-label2">下一页</div>
	       	</div>
     	</div>
    </div>
</body>
</html>